<!--
 * @Author: hyq
 * @LastEditors: hyq
 * @Description: 
 * @Date: 2023-12-11 15:10:21
-->
<template>
  <view class="headerBox" :style="{ paddingTop: statusBarHeight + 'px' }">
    <view class="header">
      <view v-if="isBack" class="backBox" @click="onBack">
        <view
          class="header_back"
          :style="{ color: color, borderColor: color }"
        ></view>
      </view>
      <view
        class="header_box"
        :style="{
          height: contentBarHeight + 'px',
          lineHeight: contentBarHeight + 'px',
          color: color
        }"
      >
        {{ title }}
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { navigateBack, navigateTo, switchTab } from '@/utils'
import { useCustomHeader } from '@/hooks/useCustomHeader'

const { contentBarHeight, statusBarHeight } = useCustomHeader()

const props = withDefaults(
  defineProps<{
    title?: string
    isBack?: boolean
    color?: string
    to?: string
  }>(),
  {
    title: '',
    isBack: false,
    color: '#fff',
    to: ''
  }
)

function onBack() {
  if (props.to) {
    // if (props.to == '/pages/index/index') {
    //   switchTab(props.to)
    // } else {
    navigateTo(props.to)
    // }
  } else {
    navigateBack()
  }
}
</script>
<style scoped lang="scss">
.headerBox {
  .header {
    position: relative;
    display: flex;
    align-items: center;
    .backBox {
      height: 100%;
      width: 60rpx;
      position: absolute;
      left: 40rpx;
    }
    &_back {
      position: absolute;
      left: 20rpx;
      top: 26rpx;
      display: inline-block;
      height: 20rpx;
      width: 20rpx;
      border-width: 0 0 6rpx 6rpx;
      border-style: solid;
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    }

    &_box {
      flex: 1;
      text-align: center;
    }
  }
}
</style>
